<template>
  <div class="left">
    <!-- 智能采煤 -->
    <data-box
      wd="447px"
      class="coal-mining-box"
      title="智能采煤"
      :bg="box_header"
      he="49px"
    >
      <template slot="content">
        <div class="progress">
          <div class="progress-left">
            <ProgressBar
              wd="280px"
              he="5px"
              percent="94%"
              theme="cyan"
              title="今日采煤"
              num="15180"
              unit="吨"
              bg="linear-gradient(to right,#2753A8, #00AFFF,#16FFFF)"
            />
            <ProgressBar
              style="margin-top: 15px"
              wd="280px"
              he="5px"
              percent="25%"
              theme="#57ffaa"
              title="月累计"
              num="118497"
              unit="吨"
              bg="linear-gradient(to right,#35BD9C, #2BFFC8,#12FDFC)"
            />
          </div>
          <div class="progress-right">
            <div class="effect-img">
              <span class="effect-num">49.34</span>
            </div>
            <span class="effect-text">综采工效 (吨/工)</span>
          </div>
        </div>

        <div class="recent" style="margin-top: 21px">
          <SubTitle title="近7天全矿产量趋势分析" wd="100%" he="24px" />
          <!--智能采煤图表 -->
          <div class="coal-mining-chart">
            <LineChart
              :showLegend="true"
              :chart-data="mineralProChartData"
              :area="mineralProChartOption.area"
              :unit="mineralProChartOption.unit"
              :color="mineralProChartOption.color"
              :text="['近7天全矿产量趋势分析']"
            />
          </div>
        </div>
      </template>
    </data-box>

    <!-- 智能运输 -->
    <data-box
      :bg="box_header"
      he="49px"
      wd="447px"
      class="transport-box"
      title="智能运输"
      style="margin-top: 14px"
    >
      <template slot="content">
        <div class="transport-grid">
          <div class="transport-grid-left">
            <ul class="grid-list">
              <li class="grid-item">
                <span class="title">井下皮带数量</span>
                <div class="amount">
                  <span class="num">6</span>
                  <span class="unit">条</span>
                </div>
              </li>
              <li class="grid-item">
                <div class="first-row">
                  <span class="dot-status"></span>
                  <span class="text">开机</span>
                  <span class="num">5</span>
                  <span class="unit">条</span>
                </div>
                <div class="last-row">
                  <span class="dot-status"></span>
                  <span class="text">停机</span>
                  <span class="num">1</span>
                  <span class="unit">条</span>
                </div>
              </li>
              <li class="grid-item">
                <span class="title">开机率</span>
                <div class="amount">
                  <span class="num">87</span>
                  <span class="unit">%</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="transport-grid-right">
            <li class="grid-item">
              <span class="title">当前过煤总量</span>
              <div class="amount">
                <span class="num">15170</span>
                <span class="unit">吨</span>
              </div>
            </li>
          </div>
        </div>
        <!-- 商品煤仓 -->
        <div class="coal-bunker-list">
          <div
            class="coal-bunker-item"
            v-for="(item, index) in coal_Bunker_List"
            :key="index"
          >
            <div class="top">
              <span class="percent">{{ item.percent }}</span>
              <span class="unit">%</span>
            </div>
            <div class="bottom">
              <div class="coal-bunker-desc">
                <div class="num">
                  <span class="deep">{{ item.deep }}</span>
                  <span class="unit">米</span>
                </div>
                <span class="desc">{{ item.type }}</span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </data-box>

    <!-- 智能安全监控 -->
    <data-box
      :bg="box_header"
      he="49px"
      wd="29.375rem"
      class="safety-monitoring"
      title="智能安全监控"
      style="margin-top: 26.5008px"
    >
      <template slot="content">
        <div class="safety-monitoring-content" style="margin-top: 10.5008px">
          <SubTitle
            title="当月井下告警"
            wd="100%"
            he="24px"
            :num="[3]"
            unit="次"
            theme-one="#FEDB80"
            theme-two=""
          />
          <!-- 安全监控图表 -->
          <div
            class="safety-monitoring-chart"
            style="height: 125px; margin-top: 10px"
          >
            <LineChart
              class="left"
              :chart-data="alarmChartData"
              :area="alarmChartOption.area"
              :unit="alarmChartOption.unit"
              :color="alarmChartOption.color"
              :text="['当月井下告警']"
            />
            <div class="right" style="height: 92px;margin-top: 10px">
              <RingChart
                class="chart"
                :data="ringData"
                :showLegend="false"
                :color="['#7BA6FF', '#02E4FF', '#12D0A1', '#F4BE2D']"
                type="type"
                value="value"
                :text="`26\n人员`"
                :total="245"
              />
              <Legend
              style="height: 126px"
                class="legend"
                shape="dot"
                wd="7.6px"
                he="7.6px"
                unit=""
                itemWidth="100%"
                itemHeight="24px"
                :legend="legend"
              />
            </div>
          </div>
        </div>
      </template>
    </data-box>
  </div>
</template>

<script>
import RingChart from '@/components/chart/cockpit/RingChart.vue';
import LineChart from '@/components/chart/cockpit/LineChart';
import ProgressBar from '../lib/progressBar';
import DataBox from '../lib/dataBox.vue';
import SubTitle from '../lib/subTitle.vue';
import Legend from '@/components/chart/cockpit/Legend.vue';

export default {
  name: 'DafosiControlWebLeftField',

  components: { DataBox, ProgressBar, SubTitle, LineChart, RingChart, Legend },

  data() {
    return {
      box_header: require('../../../assets/img/decisionAnalysis/box_header.png'),
      tab: ['日', '月', '年'],
      curTab: '日',
      mineralProChartOption: {
        color: ['#00fdff', '#a2b9fd'],
        area: true,
        unit: '吨'
      },
      alarmChartOption: { color: ['#00FDFF'], area: true, unit: '次' },
      mineralProChartData: [
        { x: '12-01', y: 75, s: '计划产量' },
        { x: '12-02', y: 30, s: '计划产量' },
        { x: '12-03', y: 60, s: '计划产量' },
        { x: '12-01', y: 37, s: '完成产量' },
        { x: '12-02', y: 79, s: '完成产量' },
        { x: '12-03', y: 42, s: '完成产量' }
      ],
      alarmChartData: [
        { x: '12-01', y: 40, s: '告警数量' },
        { x: '12-02', y: 60, s: '告警数量' },
        { x: '12-03', y: 40, s: '告警数量' },
        { x: '12-04', y: 80, s: '告警数量' }
      ],
      ringData: [
        { type: '人员', value: 94, color: '#7BA6FF', per: 0 },
        { type: '传感器', value: 35, color: '#02E4FF', per: 0 },
        { type: '视频', value: 92, color: '#12D0A1', per: 0 },
        { type: '供电', value: 54, color: '#F4BE2D', per: 0 }
      ],
      legend: [
        { name: '人员', value: 94, color: '#7BA6FF' },
        { name: '传感器', value: 35, color: '#02E4FF' },
        { name: '视频', value: 92, color: '#12D0A1' },
        { name: '供电', value: 54, color: '#F4BE2D' }
      ],
      text: ['计划'],
      coal_Bunker_List: [
        { percent: '15', deep: '7.46', type: '1#原煤仓' },
        { percent: '15', deep: '8.58', type: '2#原煤仓' },
        { percent: '15', deep: '10.74', type: '3#原煤仓' },
        { percent: '15', deep: '0.78', type: '4#原煤仓' },
        { percent: '15', deep: '0.27', type: '5#原煤仓' },
        { percent: '15', deep: '0.27', type: '5#原煤仓' },
        { percent: '15', deep: '5.6', type: '5#原煤仓' },
        { percent: '15', deep: '11.8', type: '5#原煤仓' },
        { percent: '15', deep: '11.8', type: '5#原煤仓' }
      ]
    };
  },

  mounted() {},

  methods: {
    changeTab(val) {
      this.curTab = val;
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .data-box-content {
  margin-left: 4px;
}
.data-box {
  .tab {
    @include date-tab();
  }
}

// 智能采煤
.coal-mining-box {
  .progress {
    display: flex;
    justify-content: space-between;
    &-right {
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-items: center;
      .effect-img {
        width: 106.9696px;
        height: 59.56px;
        background: url("../../../assets/img/decisionAnalysis/effect_img.png")
          no-repeat;
        position: relative;
      }
      .effect-num {
        font-size: 24px;
        font-family: Agency FB, Agency FB-Bold;
        font-weight: 700;
        line-height: 24px;
        letter-spacing: 2.4px;
        line-height: 1;
        position: absolute;
        left: 50%;
        top: 15%;
        transform: translate(-50%, -50%);
      }

      .effect-text {
        margin-top: 10.44px;
        height: 12px;
        font-size: 12px;
        line-height: 1;
      }
    }
  }
  .recent {
    .coal-mining-chart {
      width: 100%;
      height: 114px;
      margin-top: 10px;
    }
  }
}

// 智能运输
.transport-box {
  .transport-grid {
    display: flex;
    height: 60px;
    &-right,
    &-left {
      height: 100%;
      background-color: #11243d;
      .grid-item,
      .grid-list {
        padding: 0px;
        margin: 0px;
        list-style: none;
      }
      .grid-list {
        display: flex;
      }
      .grid-item {
        height: 37px !important;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 12px 0px;
        padding: 0px 16.7808px;
        .title {
          font-size: 12px;
          height: 12px;
          line-height: 1;
        }
        .amount {
          display: inline-flex;
          line-height: 1;
          height: 16px;
          .num {
            font-size: 20px;
            height: 20px;
            line-height: 1;
            font-family: Agency FB, Agency FB-Bold;
            font-weight: bold;
            color: #00fdff;
          }
          .unit {
            font-size: 11px;
            height: 11px;
            line-height: 1;
            align-self: flex-end;
            font-weight: 400;
            color: #00fdff;
            margin-left: 7px;
          }
        }
        .first-row,
        .last-row {
          display: flex;
          align-items: center;
          .text,
          .unit {
            color: #656d81;
            font-size: 12px;
            height: 12px;
            line-height: 1;
          }
          .text {
            margin-left: 6.7808px;
          }
          .num {
            margin-left: 15px;
            font-size: 12px;
            line-height: 1;
            height: 12px;
          }
          .unit {
            margin-left: 6.7808px;
          }
        }
        .dot-status {
          display: inline-block;
          width: 5px;
          height: 5px;
          border-radius: 100%;
        }
        .first-row {
          .dot-status {
            background-color: $green;
          }
        }
        .last-row {
          .dot-status {
            background-color: #a2a7ba;
          }
        }
      }
    }
    &-left {
      width: 310px;
      .grid-item:nth-of-type(-n + 2) {
        border-right: 1px solid #24344c;
      }
    }
    &-right {
      margin-left: 10px;
      width: 119px;
    }
  }
  .coal-bunker-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 34px;
    align-items: center;
    margin-top: 20.88px;
    .coal-bunker-item {
      width: max-content;
      .top {
        width: 55px;
        height: 58px;
        background: url("../../../assets/img/decisionAnalysis/coal_bunker.png")
          no-repeat;
        background-size: 100% 100%;
        position: relative;
        .percent {
          background-image: linear-gradient(#cef4fc, #77edee);
          background-clip: text;
          -webkit-background-clip: text;
          color: transparent;
          font-size: 14px;
          height: 14px;
          font-family: Agency FB, Agency FB-Bold;
          font-weight: 700;
          line-height: 1;
          position: absolute;
          top: 40%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .unit {
          height: 9px;
          font-size: 9px;
          font-family: DIN, DIN-Bold;
          font-weight: 700;
          line-height: 1;
          position: absolute;
          top: 28.5%;
          right: 10%;
          transform: translate(-50%, -50%);
        }
      }
      .bottom {
        font-size: 12px;
        display: flex;
        flex-direction: column;
        text-align: center;
        margin-top: 10px;
        .coal-bunker-desc {
          .deep,
          .desc {
            font-size: 12px;
            height: 12px;
            line-height: 1;
          }
          .deep {
            font-family: Agency FB, Agency FB-Regular;
            font-weight: 700;
          }
          .desc {
            font-weight: 500;
            font-family: PingFang SC, PingFang SC-Medium;
            color: #b9d5e5;
          }
          .unit {
            height: 10px;
            font-size: 10px;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            text-align: left;
            color: #a2a7ba;
            line-height: 1;
          }
        }
      }
    }
  }
}

// 安全监控
.safety-monitoring {
  &-chart {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      width: 192px;
    }
    .right {
      flex: 1;
      margin-left: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .chart {
        width: 88px;
      }
      .legend {
        padding-right: 8px;
        flex: 1;
        margin-left: 4px;
        height: 100%;
        overflow: auto;
      }
    }
  }
}
</style>
